<template>
  <el-form 
    :model="fm.ps" 
    :ref="fm.fname" 
    :inline="true"
    :label-width="'80px'">
    <el-divider content-position="center">{{ fm.ps.orderNum }}</el-divider>
    <el-row>
      <el-form-item 
        label="付款金额"
        prop="payMoney"
        :rules="[
          { required: true, message: '请输入付款金额', trigger: 'blur' },
          this.$rules.isFloat('付款金额必须大于0'),
          { validator: fm.valPayMoneyDiff, trigger: 'blur' }
        ]">
        <el-input 
          maxlength="6" 
          clearable 
          placeholder="付款金额" 
          v-model="fm.ps.payMoney"
          style="width: 130px;">
          <b slot="suffix" class="c-black">元</b>
        </el-input>
      </el-form-item>

      <!-- <el-form-item 
        label="入账时间"
        prop="gainTime"
        :rules="[{ required: true, message: '请选择入账时间', trigger: 'blur' }]">
        <el-date-picker
          class="date"
          v-model="fm.ps.gainTime"
          type="date"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择开始日期"
          style="width: 140px;"
        />
      </el-form-item> -->

      <el-form-item 
        label="摘要"
        prop="remark"
        :rules="[{ required: true, message: '请输入摘要', trigger: 'blur' }]">
        <el-input 
          type="textarea"
          show-word-limit 
          placeholder="摘要" 
          v-model="fm.ps.remark"
          :rows="1"
          style="width: 260px;"
        />
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script>
export default {
  name: "ApplyPayMentItem",
  props: {obj: Object},
  data() {
    let {disPrice, alPayPrice} = this.obj;
    // 验证-付款金额不能超过剩余付款金额
    const valPayMoneyDiff = (rule, value, callback) => {
      if (value) {
        // 剩余付款金额
        let diff = disPrice - alPayPrice;
        if (value > diff) {
          return callback(new Error(`金额不能超过${diff}元`));
        }
      }
      callback();
    }

    return {
      fm: {
        fname: 'applyPaymentItemFm',
        valPayMoneyDiff,
        ps: {
          // 订单编号
          orderNum: '',
          // 订单id
          orderId: '',
          // 付款金额
          payMoney: '',
          // // 入账时间
          // gainTime: '',
          // 备注
          remark: '',
        }
      }
      
    }
  },
  created() {
    let o = this.obj, ps = this.fm.ps;
    if(o){
      // 订单编号
      ps.orderNum = o.orderNum;
      // 订单id
      ps.orderId = o.id;
    }
  },
  methods: {
    // 获取-行表单数据对象
    getFmData(){
      return this.fm.ps;
    },
    // 验证行表单数据
    valRowFm() {
      const {fname} = this.fm;

      return new Promise(resolve => {
        this.$refs[fname].validate(valid => {
          resolve(valid);
        });
      });
    },

  }
}
</script>